<template>
  <div class="ranking-container">
    <van-nav-bar
      title="祈福排行"
      left-arrow
      @click-left="onClickLeft"
      :border="false"
      class="custom-nav"
      :height="88"
    />

    <van-tabs
      v-model:active="activeTab"
      color="#DF5454"
      title-active-color="#DF5454"
      background="transparent"
      :line-width="40"
      line-height="4px"
    >
      <!-- 供灯次数排行榜 -->
      <van-tab>
        <template #title><van-icon name="gem" />供灯次数</template>
        <van-pull-refresh v-model="refreshingCount" @refresh="onRefreshCount">
          <div class="ranking-list">
            <div v-for="(item, index) in countList" :key="index" class="ranking-item">
              <div class="rank-number" :class="{'top-three': index < 3}">
                {{ index + 1 }}
              </div>
              <van-image
                round
                width="88"
                height="88"
                :src="item.avatar || defaultAvatar"
                class="user-avatar"
              />
              <div class="user-info">
                <span class="nickname">{{ item.nickname }}</span>
                <span class="count">{{ item.count }}次</span>
              </div>
            </div>
          </div>
        </van-pull-refresh>
      </van-tab>

      <!-- 供灯金额排行榜 -->
      <van-tab>
        <template #title><van-icon name="gold-coin" />供灯金额</template>
        <van-pull-refresh v-model="refreshingAmount" @refresh="onRefreshAmount">
          <div class="ranking-list">
            <div v-for="(item, index) in amountList" :key="index" class="ranking-item">
              <div class="rank-number" :class="{'top-three': index < 3}">
                {{ index + 1 }}
              </div>
              <van-image
                round
                width="88"
                height="88"
                :src="item.avatar || defaultAvatar"
                class="user-avatar"
              />
              <div class="user-info">
                <span class="nickname">{{ item.nickname }}</span>
                <span class="count">{{ item.amount }}元</span>
              </div>
            </div>
          </div>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import defaultAvatar from '@/assets/images/profile-icon.png'

const router = useRouter()
const activeTab = ref(0)
const refreshingCount = ref(false)
const refreshingAmount = ref(false)
const countList = ref([])
const amountList = ref([])

// 模拟获取排行榜数据的 API
const fetchRankingList = async (type) => {
  // 这里替换为实际的 API 调用
  // const res = await getRankingList({ type })
  // return res.data

  return new Promise((resolve) => {
    setTimeout(() => {
      const list = Array(10).fill(null).map((_, index) => ({
        avatar: defaultAvatar,
        nickname: `用户${index + 1}`,
        count: type === 'count' ? (100 - index * 5) : undefined,
        amount: type === 'amount' ? (1000 - index * 50).toFixed(2) : undefined
      }))
      resolve(list)
    }, 1000)
  })
}

// 加载次数排行榜数据
const loadCountData = async () => {
  try {
    refreshingCount.value = true
    const data = await fetchRankingList('count')
    countList.value = data
  } catch (error) {
    console.error('加载次数排行榜数据失败:', error)
  } finally {
    refreshingCount.value = false
  }
}

// 加载金额排行榜数据
const loadAmountData = async () => {
  try {
    refreshingAmount.value = true
    const data = await fetchRankingList('amount')
    amountList.value = data
  } catch (error) {
    console.error('加载金额排行榜数据失败:', error)
  } finally {
    refreshingAmount.value = false
  }
}

// 监听标签页切换
watch(activeTab, async (newVal) => {
  if (newVal === 0 && countList.value.length === 0) {
    await loadCountData()
  } else if (newVal === 1 && amountList.value.length === 0) {
    await loadAmountData()
  }
})

// 次数排行榜下拉刷新
const onRefreshCount = async () => {
  await loadCountData()
}

// 金额排行榜下拉刷新
const onRefreshAmount = async () => {
  await loadAmountData()
}

const onClickLeft = () => {
  router.back()
}

// 初始加载
onMounted(async () => {
  // 初始加载两个排行榜的数据
  await Promise.all([loadCountData(), loadAmountData()])
})
</script>

<style scoped>
.ranking-container {
  min-height: 100vh;
  background-color: var(--primary-bg, #f7f8fa);
}

.custom-nav {
  background-color: transparent;
}

:deep(.van-nav-bar) {
  height: 88px !important;
  line-height: 88px !important;
}

:deep(.van-nav-bar__content) {
  height: 88px !important;
}

:deep(.van-nav-bar__title) {
  color: #fff;
  font-size: 36px !important;
  font-weight: bold;
  transform: translateX(0) !important;
  max-width: 100% !important;
}

:deep(.van-nav-bar .van-icon) {
  color: #fff;
  font-size: 48px !important;
}

:deep(.van-nav-bar__left) {
  padding-left: 16px !important;
  font-size: 32px !important;
}

:deep(.van-tabs) {
  margin-top: 20px;
}

:deep(.van-tabs__wrap) {
  padding: 0 32px;
  height: 88px !important;
}

:deep(.van-tabs__nav) {
  background-color: transparent !important;
}

:deep(.van-tab) {
  padding: 0 32px !important;
  font-size: 32px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  line-height: 88px !important;
}

:deep(.van-tab--active) {
  color: #DF5454 !important;
  font-weight: bold;
}

:deep(.van-tabs__line) {
  background-color: #DF5454;
  height: 4px !important;
  bottom: 16px !important;
}

.ranking-list {
  padding: 24px;
  padding-top: 32px;
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 24px;
  background: #242832;
  border-radius: 16px;
  margin-bottom: 16px;
}

.rank-number {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: rgba(255, 255, 255, 0.8);
  margin-right: 24px;
}

.rank-number.top-three {
  color: #DF5454;
  font-weight: bold;
}

.user-avatar {
  margin-right: 24px;
}

.user-info {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nickname {
  font-size: 32px;
  color: #fff;
  font-weight: 500;
}

.count {
  font-size: 32px;
  color: #DF5454;
  font-weight: bold;
}

:deep(.van-pull-refresh__head) {
  color: #fff !important;
  font-size: 28px !important;
}

:deep(.van-pull-refresh) {
  min-height: calc(100vh - 200px);
}

:deep(.van-tabs__content) {
  background-color: transparent;
}

:deep(.van-tab__pane) {
  background-color: transparent;
}
</style>
